
import RenderJudge from '@/components/RenderJudge'
import { RightOutline } from 'antd-mobile-icons'
import Link from 'next/link'
import styles from './styles.module.scss'
import Image from '@/components/Image'
import { useRouter } from 'next/router'
import useNavData from '@/store/getters/home'
const NewsBreadcrumb = ({ en, text, info = {} }) => {
  const secondBreadcrumb = () => {
    const { text = '新闻', link = '/news' } = info
    return (
      <>
        <RightOutline />
        <Link href={link}>
          <a>{text}</a>
        </Link>
      </>
    )
  }
  return (
    <header className={styles.newsBreadcrumb}>
      <section>
        <span>你的位置:</span>
        <Link href="/">
          <a>首页</a>
        </Link>
        {secondBreadcrumb()}
        <RenderJudge value={en} active={
          <>
            <RightOutline />
            <Link href={`/news/${en}`}>
              <a>{text}</a>
            </Link>
          </>
        } />
      </section>
    </header>
  )
}



const BlockInfo = ({ link, imgKey, recommendNewsData }) => {
  return (
    <ul className={styles.listData}>
      {
        recommendNewsData?.map(row => (
          <Link href={link(row)} key={row?.id}>
            <a target="_blank">
              <Image src={Reflect.get(row, imgKey)} alt={row?.newsTitle} type={3}></Image>
              <span>
                <p>{row?.newsTitle || row?.videoName || row?.title}</p>
                <p>
                  <em>
                    {row?.publishDate || row?.matchTime || row?.createTime}
                  </em>
                  {/* <Link href="/">
                        <a>123</a>
                      </Link> */}
                </p>
              </span>
            </a>
          </Link>
        ))
      }
    </ul>
  )
}

const List = ({ everybody, recommendNewsData }) => {
  const route = useRouter()
  const { newsNavList } = useNavData()
  console.log(everybody)
  const en = route?.query?.id?.[0]
  const text = newsNavList?.find(item => item?.en === en)?.newsTypeName
  return (
    <main className={styles.h5list}>
      <List.NewsBreadcrumb en={en} text={text} />
      <aside>
        <ul>
          {
            everybody?.map(r => (
              <Link key={r?.id} href={`/news/` + r?.id}>
                <a className='textoverone'>
                  {r?.newsTitle}
                </a>
              </Link>
            ))
          }
        </ul>
      </aside>
      <section>
        <h3 className={styles.hotTitle}>
          热门推荐
        </h3>
        <List.BlockInfo recommendNewsData={recommendNewsData} link={(row) => `/news/${row?.id}`} imgKey={'newsImg'} />
      </section>
    </main>
  )
}
List.NewsBreadcrumb = NewsBreadcrumb
List.BlockInfo = BlockInfo
export default List